<template>
  <div class="big">
    <van-nav-bar title="搜索结果" fixed class="navbar">
      <template #left>
        <van-icon name="arrow-left" class="back" @touchstart.stop="back" />
      </template>
    </van-nav-bar>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <articlesItem
        v-for="(item, index) in results"
        :key="index"
        :item="item"
        @click.native="push(item.art_id)"
        :showcross="false"
      ></articlesItem>
    </van-list>
  </div>
</template>

<script>
import { getsearchlist } from '../../api/search'
import { mapState } from 'vuex'
export default {
  // 组件名称
  name: 'searchresults',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data () {
    return {
      loading: false,
      finished: false,
      page: 0,
      results: [],
      keyword: '',
      scrollY: 0
    }
  },
  // 获取文章搜索列表请求
  async activated () {
    this.keyword = this.$route.params.id
    const res = await getsearchlist(this.keyword, 1)
    this.results = res.data.data.results
  },
  methods: {
    // 关闭searchresults搜索列表页面
    back () {
      this.$router.push('/search1')
    },
    // 点击进入文章详情页
    push (id) {
      this.$router.push('/articlesinfo/' + id)
    },
    // 下拉加载更多
    async onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.page++
      const res = await getsearchlist(this.keyword, this.page)
      this.results.push(...res.data.data.results)
      // 加载状态结束
      this.loading = false
      // 数据全部加载完成
      if (res.data.data.results.length == 0) {
        this.finished = true
      }
    }
  },
  // 文章评论条数
  computed: {
    ...mapState(['pinglunlengths'])
  }
}
</script>
<style scoped lang="less">
.back {
  position: relative;
  color: #fff;
  font-size: 22px;
  left: -4px;
}
.big {
  padding-top: 46px;
}
</style>
